<ion-header>
    <header-component>
        <ion-toolbar>
            <ion-buttons class="button-left">
                <img navBackButton src="assets/imgs/return.svg" alt="">
            </ion-buttons>
            <ion-title>联动控制柜</ion-title>
        </ion-toolbar>
    </header-component>
</ion-header>

<ion-content>
    <div class="type-content-dt">
        <div class="detail-item horizontal-item" *ngFor="let item of typeData">
            <p class="detail-title">{{ item.fireDeviceTypeName }}</p>
            <p class="detail-data">
                <span class="data " [ngClass]="{ 'data-total':item.deviceTotalCount !== 0 }">{{ item.deviceTotalCount || 0 }}</span>
                <span class="data " [ngClass]="{ 'data-nomal': (item.deviceTotalCount - item.alarmCount - item.breakDownCount) }">{{ item.deviceTotalCount - item.alarmCount - item.breakDownCount || 0 }}</span>
                <span class="data " [ngClass]="{ 'data-break': item.breakDownCount }">{{ item.breakDownCount || 0 }}</span>
            </p>
        </div>
    </div>
    <div class="type-detail">
        <div class="type-detail-item" *ngFor="let data of alarms">
            <div class="type-detail-title">
                <span>{{ data.fireDeviceTypeName || data.specialName }}</span>
                <span>
                    <i [ngClass]="{ 'fault': data.messages.length }">{{ data.messages.length || 0 }}</i> 
                    <span>故障点</span>
                </span>
            </div>
            <div class="type-detail-content" *ngFor="let item of data.messages">
                <ul>
                    <li>
                        <img src="assets/imgs/fire/linkage.png">
                        <span>{{ item.dateTime }}</span>
                        <p>{{ item.content }}</p>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</ion-content>